<template>
<div>
    <v-header></v-header>
   <!-- <div class="top-bar">网易新闻</div> -->
   <!-- 网易新闻 -->
   <!-- <div class="content">
       <div v-for="(item,index) in news" :key="index" class="content-item">
           <router-link :to="item.path" class="img-a">
               <img :src="item.image">
           </router-link>
           <div class="right-content">
               <div class="title">{{item.title}}</div>
               <div class="time">{{item.passtime}}</div>
           </div>
       </div>
   </div> -->
   <!-- 段子与详情页（dashboard  和 detail） -->
   <div class="content">
       <router-link tag="div" :to="'./detail/'+item.sid"
        v-for="(item,index) in news" :key="index" class="content-item">
                    <div class="left-content">
                        <div class="title">{{item.text}}</div>
                    </div>
                    <img v-if="item.images" :src="item.images" class="joke-img">
       </router-link>
      
   </div>

</div>
</template>

<script>
import vHeader from './header' 
import axios from 'axios'
import {getWangYiNews} from '../sever'
import {getJoke} from '../sever'
export default {
    data(){
        return{
            news:[]
        }
    },
    components:{
        vHeader
    },
    created(){
            this.getNews();
    },
    methods:{
        
        getNews(){
            // return
            // post请求
            axios.post(getJoke,{
                page:1,
                count:5
            })
            .then(res =>{
                console.log(res.data)
                this.news=res.data.result
            })
            .catch(err =>{
                console.log(err)
            })
        }
    }
}
</script>

<style scoped>

    .top-bar{
        width: 100%;
        height: 45px;
        background-color: #000;
        line-height: 45px;
        color: #fff;
    }
    /*网易新闻  */
    /* .content{
        width: 600px;
        margin: 0 auto;
        border: 1px solid #eee;
    }
    .content-item{
        padding: 10px;
        height: 90px;
        border: 1px solid #eee;
    }
    
    .img-a{
        float: left;
        width: 140px;
        height: 88px;
        overflow: hidden;
        margin-right: 20px;
    }
    .right-content{
        margin-top: 20px;
        text-align: left;
    }
    .time{
        margin-top: 20px;
    }  */
    
    /* 段子列表 */
    .content{
        width: 600px;
        margin: 0 auto;
        border: 1px solid #eee;
    }
    .title{
        height: 80px;
        color: #000;
        text-align: left;
        margin-left: 20px;
    }
    .joke-img{
        width: 80px;
        height: 60px;
        float:right;
        margin-right: 20px;
    }
</style>